<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>WebRTC | 前端开发团队</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
	<!-- 外联的CSS文件-->
	<link rel="stylesheet" href="../css/bootstrap.css"/> 
	<link rel="stylesheet" href="../css/bootstrap-responsive.css"/> 
	<link rel="stylesheet" href="../css/docs.css"/> 



	<script type="text/javascript" src="../js/SyntaxHighlighter/scripts/XRegExp.js"></script>
	<script type="text/javascript" src="../js/SyntaxHighlighter/scripts/shCore.js"></script>
	<script type="text/javascript" src="../js/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
	<link type="text/css" rel="stylesheet" href="../js/SyntaxHighlighter/styles/shCore.css"/>
	<link type="text/css" rel="Stylesheet" href="../js/SyntaxHighlighter/styles/shThemeDefault.css" />
	<script type="text/javascript">SyntaxHighlighter.all();</script>

	<style>
	body, input, button, textarea {
		font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti,sans-serif;
	  font-weight: normal;
	}
	div.prettyprint{
		border-radius: 4px 4px 4px 4px;
		display: block;
		font-size: 1em;
		line-height: 20px;
		margin:10px 0px;
	}
	.syntaxhighlighter .container:before, .container:after {
		content: none;
	}
	.syntaxhighlighter .gutter .line {
		 border-right: 0px solid #6CE26C !important
	}
	.syntaxhighlighter,.syntaxhighlighter .line.alt2,.syntaxhighlighter .line.alt1 {
		background: none !important;
	}
	</style> <!--内联 css 代码-->
    <link href="../css/prettify.css" rel="stylesheet">
    <link href="../css/bootstro.css" rel="stylesheet">
</head>

<body>
<!-- Navbar ================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="navbar-inner">
		<div class="container">
			<a class="brand" href="../index.html">前端开发团队</a>
		
			<div class="nav-collapse collapse">
				<ul class="nav">
					<li class="active">
						<a href="../index.html">首页</a>
					</li>
					<li class="">
						<a class="bootstro" href="../getting-started.html">起步</a>
					</li>
					<li class="">
						<a class="bootstro" href="../scaffolding.html">脚手架</a>
					</li>
					<li class="">
						<a class="bootstro" href="../base-css.html">基本的CSS样式</a>
					</li>
					<li class="">
						<a class="bootstro" href="../components.html">组件</a>
					</li>
					<li class="">
						<a class="bootstro" href="../api.html">API手册</a>
					</li>
					<li class="">
						<a class="bootstro" href="../docs.html">经验交流</a>
					</li>
					<li class="">
						<a class="bootstro" href="../tools.html">工具</a>
					</li>
					<li class="">
						<a class="bootstro" href="../about.html">关于</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
    

<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>Auto Version</h1>
    <p class="lead">前端好工具,轻松搞定静态资源版本号。</p>
  </div>
</header>

  <div class="container">
    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav affix-top">
          <li><a href="#pSummary"><i class="icon-chevron-right"></i> 概述</a></li>
		  <li><a href="#pStandard"><i class="icon-chevron-right"></i> 静态缓存更新指导规范</a></li>
		  <li><a href="#pTheory"><i class="icon-chevron-right"></i> 工具的工作原理</a></li>
          <li><a href="#pGet"><i class="icon-chevron-right"></i> 工具的获取</a></li>
		  <li><a href="#pAnalysis"><i class="icon-chevron-right"></i> 工具主代码解析</a></li>
          <li><a href="#pUse"><i class="icon-chevron-right"></i> 工具的使用方法</a></li>

        </ul>
      </div>
      <div class="span9">
			<section id="pSummary">
					  <div class="page-header">
						<h1>概述</h1>
					  </div>
					  <p>
					      前端开发中为了提高性能往往会对静态资源增加版本号，但在开发过程中，可能一次修改很多文件，开发人员往往会忘记更新某个文件版本号，导致界面出错。自动更新静态资源版本号工具，只要执行一次java程序，即可以帮助开发人员完成版本号的更新。
					  </p>
			</section>

			<section id="pStandard">
					  <div class="page-header">
						<h1>静态缓存更新指导规范</h1>
					  </div>
					  <p>详情请见：<a href="http://172.16.0.17:3000/projects/truesocial/wiki/%E9%9D%99%E6%80%81%E7%BC%93%E5%AD%98%E6%9B%B4%E6%96%B0%E6%8C%87%E5%AF%BC%E8%A7%84%E8%8C%83" target="blank">静态缓存更新指导规范</a></p>

					  <p class="text-error">注意事项</p>
					  <ol>
					    <li>css中背景图片引用中url必须要加“”。</li>
						<p class="text-success">正确写法：<code>background:url("../images/main-icon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0)</code></p>
						<p class="text-error">错误写法：<code>background:url(../images/main-icon.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0)</code></p>
						<li>静态资源引入路径使用el表达式时el表达式中变量前后不能有空格。</li>
						
						<p class="text-success">正确写法：<code>${RESOUCE_STATIC_URL}</code></p>
						<p class="text-error">错误写法：<code>${ RESOUCE_STATIC_URL}</code></p>
					  </ol>
			</section>

            <section id="pTheory">
                     <div class="page-header">
					     <h1>工具的工作原理</h1>
					 </div>
					 <p>该工具主要通过当前文件大小和上一次文件大小(记录在版本信息中的文件大小)的比较，来判断是否需要修改版本号，如果当前文件大小和上一次文件大小不同则会自动修改版本号，且当前文件大小会被记录到版本信息中。</p>
			</section>

			<section id="pGet">
                     <div class="page-header">
					     <h1>工具的获取</h1>
					 </div>
					 <ol>
						  <li>打包下载 <a href="../files/download/autoversion.rar" target="blank">autoversion</a></li>
						  <li>svn下载地址 svn://172.16.30.3/TS-Code/components/autoversion</li>
						</ol>
			</section>

			<section id="pAnalysis">
                     <div class="page-header">
					     <h1>工具主代码解析</h1>
					 </div>
					 <p>下面是自动修改版本号工具的主代码，注释中详细描述了代码的主要功能。</p>
					 <div class="prettyprint linenums">
					 <script type="syntaxhighlighter" class="brush: js; ">
							public class Run {

								public static void main(String[] args) {
									System.out.println("<start>");
									// 主版本号
									ResourceVersionManager.SYSTEM_VER = "2.5.2.1.";
									// 用于替换${RESOUCE_STATIC_URL}
									ResourceVersionManager.RESOUCE_STATIC_URL = "D:\\Administrator\\Desktop\\test\\"; 
									// 用于替换" ./"
									ResourceVersionManager.APP_BASE_URL = "D:\\Administrator\\Desktop\\test\\"; 

									// 初始化文件扫描器
									ResourceVersionManager rm = new ResourceVersionManager();

									// -------------------------------------------------------------
									// kiss seed
									// 初始化 kiss的匹配器
									String seedFile = "D:\\Administrator\\Desktop\\test\\seed-min.js";
									ResourceMatchBase match = new KissySendMatch(); // kissy规则匹配器
									// rm.scanFile(seedFile, match);

									// -------------------------------------------------------------
									// 扫描CSS中静态资源
									String xFile = "D:\\Administrator\\Desktop\\test\\";
									String fileType[] = {
											".css", ".html", ".htm", "vm", ".jsp"
									};
									match = new ImgMatch(); // Img规则匹配器
									// rm.scanFileDir(xFile, fileType, match);

									// -------------------------------------------------------------
									// 扫描jsp中引用的js css ico文件
									xFile = "D:\\Administrator\\Desktop\\test\\";
									String mfileType[] = {
											".html", ".htm", "vm", ".jsp"
									};
									String[] ingore = {
										"D:\\Administrator\\Desktop\\test\\app"
									};
									match = new PageJsAndCssMatch(); // js与css规则匹配器
									rm.scanFileDir(xFile, mfileType, match, ingore);
									System.out.println("<finish>");

								}
							}

                        </script>
						</div>
			</section>

			<section id="pUse">
					  <div class="page-header">
						<h1>工具的使用方法</h1>
					  </div>				

						<h2>工具的使用</h2>
						<p>1. 首先把项目添加到workspace(打包下载的解压到workspace)。</p>
						<p>2. 找到Run类修改main方法中的变量。下面的代码是修改本地致友项目的版本号main方法的代码</p>
						<div class="prettyprint linenums">
                        <script type="syntaxhighlighter" class="brush: js; ">
							public static void main(String[] args) {
									System.out.println("<start>");
									// 主版本号
									ResourceVersionManager.SYSTEM_VER = "2.5.1.0.";

									// 需要扫描转换的文件夹路径
									ResourceVersionManager rm = new ResourceVersionManager();
									// 扫描项目中seed.js文件
									// seed文件的路径
									String seedFile = "F:\\workspace\\win-parent\\win-resources\\webapp\\js\\seed-min.js";
									// rm.kissyEditVersion(seedFile);

									// 扫描项目资源信息文件
									String staticFile = "F:\\workspace\\win-parent\\win-resources\\webapp\\";
									// 项目静态资源服务路径 for ./
									ResourceVersionManager.APP_BASE_URL = staticFile;
									// rm.picVersion(staticFile);

									// 项目静态资源实际路径 如果不配置 自动获取相对路径
									ResourceVersionManager.RESOUCE_STATIC_URL = "F:\\workspace\\win-parent\\win-resources\\webapp\\";
									String xFile = "F:\\workspace\\win-parent\\win-webapp\\webapp\\";
									ResourceVersionManager.APP_BASE_URL = xFile;
									rm.fileVersion(xFile);

									System.out.println("<finish>");

								}
						</script>
						</div>
						<p>3. 直接运行此代码。以后每次修改代码或者发布前先运行一下此main方法即可自动修改静态资源的版本号了。</p>
						<p>4. 运行结果 </p>
						<img src="images/autoVersionRunResault.png" width="600"/>
						<br />
						<br />
						<br />
						<img src="images/autoVersionRunResault2.png" width="600"/>
			</section>


      </div>
    </div>

  </div>

    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p>苏州科达科技股份有限公司 - 前端开发团队</p>
      </div>
    </footer>


</body>
</html>